<template>
  <!-- 查看用户 -->
  <Edialog
    :outershow="viewUser"
    @close="viewUser = false"
    title="查看用户"
    class="edialogOne"
  >
    <ETable
      adjacent
      ref="ETable"
      :height="320"
      :titleObj="userTitleObj"
      @sortFun="viewUserSortFun"
      :reqObj="setOf"
      :reqFn="getSysMemberRole"
    >
    </ETable>
  </Edialog>
</template>

<script>
import Edialog from '@/components/Edialog'
import ETable from '@/components/ETable'
import { getSysMemberRole } from '@/api/management/role'
export default {
  components: {
    Edialog,
    ETable
  },
  data () {
    return {
      setOf: {
        roleId: '',
        sortStr: ''
      },
      viewUser: false,
      userTitleObj: [
        { prop: 'MEMBER_CODE', label: '用户编码', sortable: 'custom' },
        { prop: 'MEMBER_USERNAME', label: '用户名字', sortable: 'custom' },
        { prop: 'ORG_NAME', label: '所属机构', sortable: 'custom' },
        { prop: 'DEPART_NAME', label: '所属部门', sortable: 'custom' }
      ]
    }
  },
  methods: {
    getSysMemberRole,
    async open (row) {
      this.setOf.roleId = row.ID
      this.viewUser = true
      this.$nextTick(() => {
        this.$refs.ETable.pageInfo.page = 1
        this.$refs.ETable.getData()
      })
    },
    async viewUserSortFun (str) {
      this.setOf.sortStr = str
      this.$refs.ETable.getData()
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 14px;
  width: 100%;
  background-color: #66b1ff;
  color: #fff;
  margin-top: 20px;
}
.caidan {
  width: 100%;
  height: calc(100vh - 354px);
  border: 1px solid #ccc;
  position: relative;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .el-tree {
    // padding: 20px;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-dropdown {
    position: absolute;
    background-color: #fff;
    right: 0px;
    width: 20px;
  }

  .el-tree-node:focus > .el-tree-node__content .el-dropdown {
    background-color: #f5f7fa;
  }
  .el-tree-node__content:hover .el-dropdown {
    background-color: #f5f7fa;
  }

  .el-dropdown .el-button {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.edialogOne {
  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    .toptitle {
      width: 50px;
    }
    .el-input {
      flex: 1;
    }
    .el-button--primary {
      margin-left: 50px;
    }
  }
}
.empower {
  border: 1px solid #dcdfe6;
  height: 400px;
  overflow: hidden auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
